<template>
	<div>
		<!-- 个人中心顶部布局 -->
		<div class="header" @click="login">
			<image class="userImg" :src="avatarUrl ? avatarUrl : `../../static/images/personal/personal.png`" mode=""></image>
			<div class="userInfo">
				<p>{{ nickName ? nickName : '未登录' }}</p>
			</div>
		</div>
		<div class="content">
			<h2>我的资产</h2>
			<p class="line"></p>
			<div class="myAssetList">
				<div class="assetItem">
					<span>￥0</span>
					<span>回馈金</span>
				</div>
				<div class="assetItem">
					<span>￥0</span>
					<span>红包</span>
				</div>
				<div class="assetItem">
					<span>￥0</span>
					<span>优惠券</span>
				</div>
				<div class="assetItem">
					<span>￥0</span>
					<span>津贴</span>
				</div>
				<div class="assetItem">
					<span>￥0</span>
					<span>礼品卡</span>
				</div>
			</div>
			<!-- 列表选项 -->
			<div class="personalList">
				<div class="navItem" v-for="(item, index) in personalList" :key="index">
					<i class="iconfont " :class="item.icon"></i>
					<p>{{ item.name }}</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
module.exports = {
	data() {
		return {
			nickName: '',
			avatarUrl: '',
			personalList: [
				{
					name: '我的订单',
					icon: 'icon-dingdan11'
				},
				{
					name: '我的拼团',
					icon: 'icon-pintuandingdan'
				},
				{
					name: '领红包',
					icon: 'icon-tubiaolunkuo-1'
				},
				{
					name: '我的积分',
					icon: 'icon-jifen3'
				},
				{
					name: '地址管理',
					icon: 'icon-dizhiguanli'
				},
				{
					name: '账号安全',
					icon: 'icon-dingdan11'
				},
				{
					name: '联系客服',
					icon: 'icon-zhanghaoanquan'
				},
				{
					name: '用户反馈',
					icon: 'icon-tubiaolunkuo-'
				},
				{
					name: '帮助中心',
					icon: 'icon-bangzhuzhongxin'
				},
				{
					name: '退还/售后',
					icon: 'icon-shouhou'
				}
			]
		};
	},
	methods: {
		//点击头像跳转到登录页面
		login() {
			//点击的时候跳转到登录页面
			//用户信息没有才去登录页面
			if (!this.nickName) {
				uni.navigateTo({
					url: '/pages/login/login',
					animationType: 'pop-in',
					animationDuration: 2000
				});
			}
		}
	},
	mounted() {
		//获取本地存储里面用户信息
		let userInfo = uni.getStorageSync('USER');
		console.log(userInfo);
		if (userInfo) {
			this.nickName = userInfo.nickName;
			this.avatarUrl = userInfo.avatarUrl;
		}
	}
};
</script>

<style lang="stylus">
.header
	width 750rpx
	display flex
	padding 40rpx 0
	background #EED7B5
	.userImg
		width 100rpx
		height 100rpx
		margin 0 50rpx 0 30rpx
		background #fff
		border-radius 50rpx
	.userInfo
		p
			font-size 28rpx
			height 50rpx
			line-height 50rpx
.content
	h2
		width 750rpx
		height 100rpx
		line-height 100rpx
		margin-left 36rpx
		font-size 26upx
	.line
		width 90%
		height 2rpx
		background #eee
		margin 0 auto
	.myAssetList
		width 90%
		margin 20rpx auto
		display flex
		.assetItem
			width 25%
			display flex
			flex-direction column
			align-items center
			line-height 40rpx
			font-size 24rpx
			color #333
	.personalList
		display flex
		flex-flow wrap
		border-top 1rpx solid #eee
		.navItem
			width 33.3%
			text-align center
			border-bottom 1rpx solid #EEEEEE
			border-right 1rpx solid #EEEEEE
			box-sizing border-box
			padding 30rpx 0
			&:nth-child(3n)
				border-right none
			.iconfont
				font-size 60rpx
			p
				font-size 24upx
				line-height 40upx
</style>
